<template>
	<view class='car'>
		<view class="list" v-if="list.length">
			<view class="shopOne dFlex jStart_aCenter" v-for="(item,index) in list" :key='index'>
				<view class="status imgPublic" @tap='change_selOne(index)'>
					<image v-if="!item.status" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
					<image v-if="item.status" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
				</view>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="item.list_img" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="shopName">{{item.product_name}}</view>
						<view class="sku">规格：{{item.specs_name}}</view>
						<view class="other dFlex jBetween_aCenter">
							<view class="price">￥{{item.sell_price}}</view>
							<view class="count dFlex jEnd_aCenter">
								<view class='smallBtn imgPublic' @tap.stop='changeCount("2",index)'>
									<image src='https://wx.gdxixiashi.com/public/images/car/jian.png' mode='widthFix'></image>
								</view>
								<view class='smallIpt'>
									<input type="number" v-model='item.num' min='1' @input="setCount($event,index)">
								</view>
								<view class='smallBtn imgPublic' @tap.stop='changeCount("1",index)'>
									<image src='https://wx.gdxixiashi.com/public/images/car/jia.png' mode='widthFix'></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="../static/images/empty.png" mode="widthFix"></image>
		</view>
		<view class='seat'></view>
		<view class="tools dFlex jBetween_aCenter">
			<view class="operate dFlex jStart_aCenter">
				<view class="selStatus dFlex jStart_aCenter" @tap='change_selAll'>
					<view class="statusIcon imgPublic">
						<image v-if="!selAll" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
						<image v-if="selAll" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
					</view>
					<text>{{selAll?'取消全选':'全选'}}</text>
				</view>
				<text class="del" @tap.stop='delShop'>删除</text>
			</view>
			<view class="tj dFlex jEnd_aCenter">
				<view class="allPrice">合计 <text>￥{{total?total.toFixed(2):'0.00'}}</text> </view>
				<view class="jiesuan" @tap='jiesuan'>去结算</view>
			</view>
		</view>
		<tabbar actIdx='3' ref='tabbar' :identity='identity'></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				identity:uni.getStorageSync('identify')?uni.getStorageSync('identify'):'1',
				list:[],
				selAll:false,
				sel:[],
				total:0,
			};
		},
		onLoad(){
			this.$nextTick(()=>{
				// #ifdef APP-PLUS
				uni.hideTabBar();
				// #endif
				this.$refs.tabbar.init();
			})
		},
		onShow(){
			if(uni.getStorageSync('userId')){
				this.initCar();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initCar(){
				this.tool.getData('Cart/cartList',{
					memberId:uni.getStorageSync('userId'),
				}).then(res=>{
					// console.log(res);
					if(res){
						this.sel = [];
						this.total = 0;
						this.selAll = false;
						res.list.map((item,index)=>{
							item.status = false;
							item.list_img = getApp().globalData.imgDomain + item.list_img;
						})
						this.list = res.list;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 结算商品
			jiesuan(){
				if(this.sel.length){
					let count = 0;
					this.sel.forEach((item)=>{
						if(!item.num || item.num < 1){
							count ++ ;
						}
					})
					let cartIds = '';
					this.sel.map((item,index)=>{
						cartIds = index == this.sel.length-1?cartIds+item.cartId:cartIds+item.cartId+',';
					})
					if(count > 0){
						uni.showToast({
							title:'存在商品未设置购买数量',
							icon:"none"
						})
						return;
					}
					uni.navigateTo({
						url:'../kind/beforeOrder?status=2&cartIds='+cartIds,
					})
				}else{
					uni.showToast({
						title:'请选择需要结算的商品',
						icon:"none"
					})
				}
			},
			// 删除选中的商品
			delShop(){
				if(this.sel.length){
					uni.showModal({
						content:'确定删除选中的商品?',
						success:(op)=>{
							if(op.confirm){
								let cartIds = '';
								this.sel.map((item,index)=>{
									cartIds = index == this.sel.length-1?cartIds+item.cartId:cartIds+item.cartId+',';
								})
								this.tool.getData('Cart/delCart',{
									cartIds:cartIds,
								}).then(res=>{
									console.log(res);
									if(res){
										uni.showToast({
											title:'已删除',
											icon:"success"
										})
										this.initCar();
									}
								}).catch(err=>{
									console.log(err);
								})
							}
						}
					})
				}else{
					uni.showToast({
						title:'请选择需要删除的商品',
						icon:"none"
					})
				}
			},
			// 输入数量
			setCount(e,idx){
				let line = this.list[idx];
				line.num = e.detail.value;
				this.calcPrice();
			},
			// 修改某一个商品的数量
			changeCount(type,idx){
				let line = this.list[idx];
				if(type == '2'){
					if(line.num <= '1'){
						line.num = 1;
					}else{
						line.num -- ;
					}
				}else{
					line.num++;
				}
				this.tool.getData('Cart/changeCartNum',{
					type:type,
					num:line.num,
					cartId:line.cartId,
				}).then(res=>{
					if(!res){
						console.log(type);
					}
					this.calcPrice();
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改单个商品
			change_selOne(idx){
				let line = this.list[idx];
				let index = this.tool.getIdx(this.sel,'cartId',line.cartId);
				if(line.status){
					if(index != '-1'){
						this.sel.splice(index,1);
					}
					line.status = false;
				}else{
					line.status = true;
					this.sel.push(line);
				}
				let count = 0;
				this.list.map((item,index)=>{
					if(item.status){
						count++;
						if(count == this.list.length){
							this.selAll = true;
						}else{
							this.selAll = false;
						}
					}else{
						this.selAll = false;
					}
				})
				this.calcPrice();
			},
			// 修改是否全选
			change_selAll(){
				this.sel = [];
				if(this.selAll){
					this.list.map((item,index)=>{
						item.status = false;
					})
				}else{
					this.list.map((item,index)=>{
						item.status = true;
						this.sel.push(item);
					})
				}
				this.selAll = !this.selAll;
				this.calcPrice();
			},
			// 计算显示的总金额
			calcPrice(){
				this.total = 0;
				this.list.map((item,index)=>{
					let priceOne = parseInt(item.num) * parseFloat(item.sell_price);
					if(item.status){
						this.total = this.total + priceOne;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.car{
		width: 100%;
		padding: 12px 3%;
		box-sizing: border-box;
		.tools{
			width: 100%;
			background: white;
			position: fixed;
			bottom: calc(50px + env(safe-area-inset-bottom));
			left: 0;
			padding: 10px 12px;
			box-sizing: border-box;
			.tj{
				flex: 1;
				.allPrice{
					color: #999999;
					text{
						color: #FF0000;
						font-weight: bold;
					}
				}
				.jiesuan{
					width: max-content;
					padding: 8px 20px;
					color: white;
					background: linear-gradient(#609ff8 0%, #1664ff 100%);
					border-radius: 40px;
					margin-left: 12px;
					font-weight: bold;
				}
			}
			.operate{
				width: auto;
				.del{
					font-size: 14px;
					color: #999999;
				}
				.selStatus{
					width: auto;
					font-size: 14px;
					margin-right: 12px;
					.statusIcon{
						width: 20px;
						margin-right: 8px;
					}
				}
			}
		}
		.list{
			.shopOne{
				width: 100%;
				padding: 15px 12px;
				box-sizing: border-box;
				background: white;
				border-radius: 10px;
				margin-bottom: 12px;
				border-bottom: 1px solid #eeeeee;
				.shopInfo{
					flex: 1;
					.info{
						flex: 1;
						.shopName{
							font-size: 16px;
							font-weight: bold;
						}
						.sku{
							font-size: 12px;
							color: #999999;
							margin: 5px 0;
						}
						.other{
							width: 100%;
							font-size: 12px;
							color: #F95822;
							.count{
								width:auto;
								.smallIpt{
									width:54rpx;
									height:54rpx;
									margin:0 12rpx;
									input{
										width:54rpx;
										height:54rpx;
										text-align:center;
										line-height:54rpx;
										color: #999999;
									}
								}
								.smallBtn{
									width:40rpx;
									height:40rpx;
									image{
										width:40rpx;
										height:40rpx;
									}
								}
							}
						}
					}
					.shopImg{
						width: 78px;
						max-height: 78px;
						overflow: hidden;
						margin-right: 16px;
					}
				}
				.status{
					width: 19px;
					height: 19px;
					margin-right: 16px;
				}
			}
			.shopOne:last-child{
				border: none;
			}
		}
	}
</style>
